let layerIndex;
let layerIndex1;
const table=layui.table;
function showStudentDlg(id){
    let title="新增学生"
    if(id){
        //如果id存在，则为编辑
        title="编辑学生"
        $("#formId").css("display","block");
        //读取学生信息
        $.ajax({
            url:"/api/student/"+id,
            method:"GET",
        }).done(result=>{
            console.log(result)
            //遍历result对象并将值填充到 #stuForm表单
            $.each(result,function(key,vaule){
                //修改选择器，确保选择的是 #stuForm 内的字段
                var field=$('#stuForm [name="' + key + '"]');
                if(field.is(':radio')){
                    field.filter('[value="'+vaule+'"]').prop('checked',true);
                }
                else if(field.is(':checkbox')){
                    field.prop('checked',vaule === "yes");
                }
                else{
                    field.val(vaule);
                }
            });
        })
    }
    else{
        //否则为新增
        $("#stuForm")[0].reset();//清空#stuForm表单
        $("#formId").css("display","none");
    }
    layerIndex=layer.open({
        type: 1,
        title: title,
        area: ['600px','auto'],
        content: $('#stuForm')
    });
}

function getSearchCondtion(){
    let formData = {}
    //遍历每个输入元素，将其赋值到formData中
    $("#queryForm").find("input,select").each(function(){
        let name = $(this).attr("name");//获取元素的name属性
        let value = $(this).val();//获取元素的值
        //name属性存在且不为空
        if(name&&value){
            formData[name]=value;
        }
    });
    return formData;
}

layui.use(function (){
    //1.验证表单是否合法
    layui.form.on('submit(stu-dlg)', function (data) {
        event.preventDefault();//阻止表单默认提交
        commitStuDlg();
    })
    //2.初始化
    // const table=layui.table;
    let student=getSearchCondtion();
    //创建实例
    table.render({
        elem: "#tbStudent",
        url: "/api/student/getbypage",
        method: "POST",
        contentType: "application/json",
        where: {"data": student},
        page: true,
        cols: [[
            {type: "checkbox",fixed: "left"},
            {field: "id",fixed: "left",width: 180,title: "id",sort: true},
            {field: "studentid",title: "学号",width: 310},
            {field: "name",title: "姓名",width: 300},
            {field: "age",title: "年龄",width: 180,sort: true},
            {field: "right",title: "操作",width: 180,minwidth: 125,templet: "#editTemplate"},
        ]],
        done: function(rs){

        }
    });
    //触发单元格工具事件
    table.on('tool(tbStudent)',function(obj){
        var data=obj.data;//获取当前行数据
        if(obj.event==='edit'){
            $.each(data,function(key,vaule){
                //修改选择器，确保选择的是 #stuForm 内的字段
                var field=$('#stuForm [name="' + key + '"]');
                if(field.is(':radio')){
                    field.filter('[value="'+vaule+'"]').prop('checked',true);
                }
                else if(field.is(':checkbox')){
                    field.prop('checked',vaule === "yes");
                }
                else{
                    field.val(vaule);
                }
            });
            layerIndex1=layer.open({
                title: '编辑 - id:'+data.id,
                type: 1,
                area: ['60%','60%'],
                content: $('#stuForm')
            });
        }
    });
});

function search(){
    let student=getSearchCondtion();
    // const table=layui.table;
    table.reloadData("tbStudent",{
        where: {data: student}
    });
    console.log("where condition："+JSON.stringify(student));
}

function deleteConfirm(){
    // const table =layui.table;
    //获取表格的选中状态
    const checkStatus=table.checkStatus('tbStudent');
    console.log(checkStatus);
    let str = checkStatus.data.map(item => {return item.id}).join(",");
    console.log(str);
    deleteStudentsDlg(str);
}

function commitStuDlg(){
    let formData = $("#stuForm").serialize(); //读取表单数据
    let id=$("#id").val();
    if(id!=null&&id!=""){
        //如果id不为空，则为修改学生
        //修改学生
        //验证表单是否合法(会自动验证学号)
        $.ajax({
            url: "/api/student/update",
            method: "PUT",
            data: formData
        }).done(result=>{
            console.log(result);
            if(result.data.id){
                // //读取并刷新学生列表
                // loadStudentList();

                //表格刷新
                table.reload("tbStudent");

                //关闭弹出层
                console.log("update successfully");
                if(layerIndex1){
                    layer.close(layerIndex1);
                }
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed："+ textStatus + " - "+errorThrown);
            alert("An error occured,Please try again");
        });
    }
    else{
        //否则为新增学生
        //新增学生
        //验证表单是否合法(会自动验证学号)
        $.ajax({
            url: "/api/student/add",
            method: "POST",
            data: formData
        }).done(result=>{
            console.log(result);
            if(result.data.id){
                // //读取并刷新学生列表
                // loadStudentList();

                //表格刷新
                table.reload("tbStudent");
                //关闭弹出层
                console.log("added successfully");
                if(layerIndex){
                    layer.close(layerIndex);
                }
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed："+ textStatus + " - "+errorThrown);
            alert("An error occured,Please try again");
        });
    }
    // $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");//禁用按钮
}

//删除学生
function deleteStudentDlg(id){
    layer.confirm('是否确定删除该学生？', {icon: 3}, function(){
        $.ajax({
            url:"/api/student/delete/"+id,
            method:"DELETE"
        }).done(result=>{
            console.log(result);
            //读取并刷新学生列表
            // loadStudentList();

            //表格刷新
            table.reload("tbStudent");
        })
        layer.closeAll();//关闭所有弹出层
    }, function(){});
}

//批量删除学生
function deleteStudentsDlg(ids){
    layer.confirm('是否确定删除全部选中学生？', {icon: 3}, function(){
        $.ajax({
            url:"/api/student/"+ids,
            method:"DELETE"
        }).done(result=>{
            console.log(result);
            //读取并刷新学生列表
            // loadStudentList();

            //表格刷新
            table.reload("tbStudent");
        })
        layer.closeAll();//关闭所有弹出层
    }, function(){});
}

// $(function () {
//     loadStudentList();
// });
//
// function loadStudentList() {
//     $.ajax({
//         url:"/api/student/list"
//     }).done(function (data) {
//         // console.log(data)
//         let html = "";
//         data.forEach((element,index) => {
//             html += "<tr>"
//             html += "<td>"+element.id+"</td>"
//             html += "<td>"+element.student_id+"</td>"
//             html += "<td>"+element.name+"</td>"
//             html += "<td>"+element.age+"</td>"
//             html += "<td><a href='#' onclick='showStudentDlg("+element.id+")'>编辑</a>"+"</td>"
//             html += "<td><a href='#' onclick='deleteStudentDlg("+element.id+")'>删除</a>"+"</td>"
//             html += "</tr>";
//         })
//         $("#studentTb").html(html)
//     });
// }
//
// let layerIndex;
// function showStudentDlg(id){
//     let title="新增学生"
//     if(id){
//         //如果id存在，则为编辑
//         title="编辑学生"
//         $("#formId").css("display","block");
//         //读取学生信息
//         $.ajax({
//             url:"/api/student/"+id,
//             method:"GET",
//         }).done(result=>{
//             console.log(result)
//             //遍历result对象并将值填充到 #stuForm表单
//             $.each(result,function(key,vaule){
//                 //修改选择器，确保选择的是 #stuForm 内的字段
//                 var field=$('#stuForm [name="' + key + '"]');
//                 if(field.is(':radio')){
//                     field.filter('[value="'+vaule+'"]').prop('checked',true);
//                 }
//                 else if(field.is(':checkbox')){
//                     field.prop('checked',vaule === "yes");
//                 }
//                 else{
//                     field.val(vaule);
//                 }
//             });
//         })
//     }
//     else{
//         //否则为新增
//         $("#stuForm")[0].reset();//清空#stuForm表单
//         $("#formId").css("display","none");
//     }
//     layerIndex=layer.open({
//         type: 1,
//         title: title,
//         area: ['600px','auto'],
//         content: $('#stuForm')
//     });
// }
//
// layui.use(function (){
//    layui.form.on('submit(stu-dlg)', function (data) {
//        event.preventDefault();//阻止表单默认提交
//        commitStuDlg();
//    })
// });
//
// function commitStuDlg(){
//     let formData = $("#stuForm").serialize(); //读取表单数据
//     let id=$("#id").val();
//     if(id!=null&&id!=""){
//         //如果id不为空，则为修改学生
//         //修改学生
//         //验证表单是否合法(会自动验证学号)
//         $.ajax({
//             url: "/api/student/update",
//             method: "PUT",
//             data: formData
//         }).done(result=>{
//             console.log(result);
//             if(result.id){
//                 //读取并刷新学生列表
//                 loadStudentList();
//                 //关闭弹出层
//                 console.log("update successfully");
//                 if(layerIndex){
//                     layer.close(layerIndex);
//                 }
//             }
//         }).fail((jqXHR, textStatus, errorThrown) => {
//             console.error("Request failed："+ textStatus + " - "+errorThrown);
//             alert("An error occured,Please try again");
//         });
//     }
//     else{
//         //否则为新增学生
//         //新增学生
//         //验证表单是否合法(会自动验证学号)
//         $.ajax({
//             url: "/api/student/add",
//             method: "POST",
//             data: formData
//         }).done(result=>{
//             console.log(result);
//             if(result.id){
//                 //读取并刷新学生列表
//                 loadStudentList();
//                 //关闭弹出层
//                 console.log("added successfully");
//                 if(layerIndex){
//                     layer.close(layerIndex);
//                 }
//             }
//         }).fail((jqXHR, textStatus, errorThrown) => {
//             console.error("Request failed："+ textStatus + " - "+errorThrown);
//             alert("An error occured,Please try again");
//         });
//     }
//     $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");//禁用按钮
// }
//
// //删除学生
// function deleteStudentDlg(id){
//     layer.confirm('是否确定删除该学生？', {icon: 3}, function(){
//         $.ajax({
//             url:"/api/student/delete/"+id,
//             method:"DELETE"
//         }).done(result=>{
//             console.log(result);
//             //读取并刷新学生列表
//             loadStudentList();
//         })
//         layer.closeAll();//关闭所有弹出层
//     }, function(){});
// }